{{ define "title" }}
{{- .Title -}}
{{ end }}

{{ define "css" }}

{{ if .Site.Params.highlightjs }}
  {{ if .Site.Params.highlightjsTheme }}
    <link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/{{ .Site.Params.highlightjsTheme }}.min.css" />
  {{ else }}
    <link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/default.min.css" />
  {{ end }}
{{ end }}

{{ end }}

{{ define "main" }}
<div class="ui centered relaxed grid dream-grid">
  <div class="sixteen wide mobile sixteen wide tablet twelve wide computer column markdown-body dream-single">

    <section class="ui top attached segment" id="dream-save-post-as-img">
      <header style="margin-top: 0 !important;">
        <h1 class="ui large header">
          {{ .Title }}
          <div class="sub header">
            @
            {{ if isset .Params "author" }}
              {{ if isset .Params "authorlink" }}
                <a href="{{ .Params.authorlink }}" target="_blank">{{ .Params.author }}</a>
              {{ else }}
                {{ .Params.author }}
              {{ end }}
            {{ else }}
              {{ .Site.Params.author }}
            {{ end }}
            · {{ .Date.Format "Monday, Jan 2, 2006" }}
            · {{ .ReadingTime }}{{ i18n "minuteRead" }}
            · {{ i18n "updateAt" }} {{ dateFormat "Jan 2, 2006" .Lastmod }}
          </div>
        </h1>
      </header>

      {{ if .Site.Params.showSummaryCoverInPost }}
        <img class="ui image" style="margin-top: 2rem;" src="{{ .Params.Cover }}" />
      {{ end }}

      <article style="margin-top: 2rem;">{{ .Content | emojify }}</article>
    </section>

    <footer class="ui attached segment dream-tags">
      {{ if isset .Params "tags" }}
        {{ range $tag := .Params.tags }}
          <a class="ui label" href="{{ "tags/" | relLangURL }}{{ $tag | urlize }}" title="{{ $tag }}">{{ $tag }}</a>
        {{ end }}
      {{ else }}
          <a class="ui label">{{ i18n "noTag" }}</a>
      {{ end }}
      <div
        class="ui label"
        style="float: right; cursor: pointer;"
        onclick="savePostAsImg()">
        <i class="save icon"></i>{{ i18n "saveAsImage" }}
      </div>
    </footer>

    {{ if .Site.Copyright }}
      <footer class="ui attached segment">
        {{ .Site.Copyright | safeHTML }}
      </footer>
    {{ end }}

    {{ if .Site.DisqusShortname }}
      <footer class="ui bottom attached stacked segment post-disqus-area" data-html2canvas-ignore="true">
        <div id="disqus_thread"></div>
        <script>
          /**
           *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
           *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
           */

          var disqus_config = function () {
            this.page.url = '{{ .Permalink }}';  // Replace PAGE_URL with your page's canonical URL variable
            this.page.identifier = '{{ .RelPermalink }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
          };

          (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = 'https://' + '{{ .Site.DisqusShortname }}' + '.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
          })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </footer>
    {{ end }}
    
    {{ if .Site.Params.utterancesRepo }}
      <div class="ui segment utterances-comments">
        <script src="https://utteranc.es/client.js"
          repo="{{ .Site.Params.utterancesRepo }}"
          issue-term="og:title"
          theme="github-light"
          crossorigin="anonymous"
          async>
        </script>
      </div>
    {{ end }}

  </div>
  <div class="sixteen wide mobile sixteen wide tablet four wide computer column">
    {{ partial "header.html" . }}
  </div>
</div>
{{ end }}

{{ define "js" }}
<script src="{{ "/js/html2canvas.min.js" | relURL }}"></script>
<script src="{{ "/js/post.js" | relURL }}"></script>

{{ if .Site.Params.highlightjs }}
  <script src="{{ if .Site.Params.highlightjsCDN }}{{ .Site.Params.highlightjsCDN }}{{ else }}{{ "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js" }}{{ end}}"></script>

  {{ if .Site.Params.highlightjsExtraLanguages }}
    {{ range .Site.Params.highlightjsExtraLanguages }}
      <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/{{ . }}.min.js"></script>
    {{ end }} 
  {{ end }}

  {{ partial "highlight.html" . }}
{{ end }}

{{ end }}
